<template>
  <div class="about">
    <h2>菜品罗列页面-添加菜品和下家菜</h2>
    <div></div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="菜品名称">
        <el-input v-model="input" placeholder="请输入菜品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="slescet">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogFormVisible = true"
          >新增菜品</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="nowdata" border style="width: 100%">
      <el-table-column prop="id" label="菜品ID" width="180"> </el-table-column>
      <el-table-column prop="food_name" label="菜品名称" width="180">
      </el-table-column>
      <el-table-column prop="address" label="使用状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.food_action"
            :active-value="1"
            :inactive-value="0"
            active-text="使用中"
            inactive-text="未使用"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="food_price" label="菜品价格"> </el-table-column>
      <el-table-column prop="food_type" label="菜品类型"> </el-table-column>
      <el-table-column prop="food_img" label="图片预览">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="'http://lime.api.hipencil.cc/' + scope.row.food_img"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <button class="mybtn" @click="mod(scope.row)">修改</button>
          <button class="mybtn" @click="del(scope.row.id)">删除菜品</button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="maxpage"
      :current-page="nowpage"
      @current-change="changePage"
      class="mypage"
    >
    </el-pagination>
    <!-- 添加弹框 -->
    <el-dialog title="添加菜品" :visible.sync="dialogFormVisible">
      <el-form :model="form" enctype="multipart/form-data">
        <el-form-item label="菜品名称" :label-width="formLabelWidth">
          <el-input v-model="form.food_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格" :label-width="formLabelWidth">
          <el-input v-model="form.food_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品类型" :label-width="formLabelWidth">
          <el-input v-model="form.food_type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片上传" :label-width="formLabelWidth">
          <el-upload
            ref="picture"
            action="/addFood"
            list-type="picture-card"
            :auto-upload="false"
            :http-request="fangFa"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog title="添加菜品" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="菜品名称" :label-width="formLabelWidth">
          <el-input v-model="form1.food_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品价格" :label-width="formLabelWidth">
          <el-input v-model="form1.food_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜品类型" :label-width="formLabelWidth">
          <el-input v-model="form1.food_type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-switch
            v-model="form1.food_action"
            :active-value="1"
            :inactive-value="0"
            active-text="使用中"
            inactive-text="未使用"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { FoodAll, delfood, addfood, modfood } from "../utils/api/Food";
export default {
  name: "",
  components: {},
  data() {
    return {
      pagecount: 1,
      formInline: {
        user: "",
        region: "",
      },
      tableData: [],
      value1: true,
      dialogTableVisible: false,
      dialogTableVisible1: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        food_name: "",
        food_price: "",
        food_type: "",
        uploadImg: [],
      },
      input: "",
      nowpage: 1,
      disabled: false,
      form1: {},
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getfood();
  },
  computed: {
    maxpage() {
      return Math.ceil(this.tableData.length / 5);
    },
    nowdata() {
      let qiShi = (parseInt(this.nowpage) - 1) * 5;
      return this.tableData.slice(qiShi, qiShi + 5);
    },
  },

  methods: {
    slescet() {
      console.log(this.input);
      let input = [];
      input.push(this.input);
      this.tableData = this.tableData.filter(function (item) {
        return item.food_name.includes(input);
      });
      if (this.input == "") {
        this.getfood();
      }
    },
    changePage(num) {
      this.nowpage = num;
    },
    mod(row) {
      this.dialogFormVisible1 = true;
      this.form1 = row;
      console.log(this.form1);
    },
    queding() {
      this.dialogFormVisible1 = false;
      modfood(this.form1).then((data) => {
        console.log(data);
      });
    },
    getfood() {
      FoodAll().then((data) => {
        this.tableData = data.data.data;
        console.log(this.tableData);
      });
    },
    del(id) {
      console.log(id);
      delfood(id).then((data) => {
        if (this.nowdata.length == 1) {
          this.nowpage--;
        }
        this.getfood();
        // console.log(data);
      });
      this.$message({
        message: "您已删除成功",
        type: "success",
      });
    },

    // onSubmit() {
    //   console.log("submit!");
    // },

    handleRemove(file) {
      console.log(file);
    },

    //el-upload的自定义上传方法
    fangFa(content) {
      console.log(content.file);

      let formData = new FormData();
      formData.append("food_name", this.form.food_name);
      formData.append("food_type", this.form.food_type);
      formData.append("food_price", this.form.food_price);
      formData.append("uploadImg", content.file);
      console.log(formData.get("uploadImg"));
      // 发起请求，将formData发送给后端
      addfood(formData).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.getfood();
          this.dialogFormVisible = false;
          this.form.food_name = "";
          this.form.food_type = "";
          this.form.food_price = "";
          this.$refs.picture.clearFiles();
        }
      });
    },
    //添加菜品的函数---点击添加框中的确认按钮，添加菜品
    add() {
      //调用el-upload的自定义上传方法
      console.log(this.$refs.picture);
      //调用el-upload的提交的方法
      this.$refs.picture.submit();
    },
  },
};
</script>
<style lang="less" scoped>
.about {
  text-align: left;
  padding: 0px 20px;
  box-sizing: border-box;
}
.mybtn {
  border: none;
  color: skyblue;
  background-color: transparent;
  cursor: pointer;
}
.mypage {
  text-align: right;
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>